<template>
  <div class="inputstyle">
    <!-- 基本属性 -->
    <el-divider content-position="left">基本属性</el-divider>
    <!-- 输入框编辑选项 -->
    <el-form label-width="90px" label-position="left" size="small">
      <el-form-item label="标签文本">
        <el-input v-model="datas.labelText" placeholder="请输入标签文本"></el-input>
      </el-form-item>
      
      <el-form-item label="标签宽度">
        <el-input v-model="datas.labelWidth" placeholder="例如：80px"></el-input>
      </el-form-item>
      
      <el-form-item label="提示文本">
        <el-input v-model="datas.placeholder" placeholder="请输入提示文本"></el-input>
      </el-form-item>
      
      <el-form-item label="输入类型">
        <el-select v-model="datas.type" placeholder="请选择输入类型">
          <el-option label="文本" value="text"></el-option>
          <el-option label="多行文本" value="textarea"></el-option>
          <el-option label="密码" value="password"></el-option>
          <el-option label="数字" value="number"></el-option>
          <el-option label="邮箱" value="email"></el-option>
          <el-option label="电话" value="tel"></el-option>
        </el-select>
      </el-form-item>
      
      <el-form-item label="宽度">
        <el-input v-model="datas.width" placeholder="例如：100%"></el-input>
      </el-form-item>
      
      <el-form-item v-if="datas.type === 'textarea'" label="行数">
        <el-input-number v-model="datas.rows" :min="1" :max="10"></el-input-number>
      </el-form-item>
      
      <el-form-item label="最大长度">
        <el-input v-model="datas.maxlength" placeholder="最大输入长度" type="number"></el-input>
      </el-form-item>
      
      <el-form-item label="图标">
        <el-form-item label="前缀" label-width="40px">
          <el-select v-model="datas.prefixIcon" placeholder="选择前缀图标" style="width: 125px;">
            <el-option label="默认" value=""></el-option>
            <el-option label="搜索" value="Search"></el-option>
            <el-option label="用户" value="User"></el-option>
            <el-option label="邮件" value="Message"></el-option>
            <el-option label="电话" value="Phone"></el-option>
          </el-select>
        </el-form-item>
        
        <el-form-item label="后缀" label-width="40px" style="margin-top: 10px;">
          <el-select v-model="datas.suffixIcon" placeholder="选择后缀图标" style="width: 125px;">
            <el-option label="默认" value=""></el-option>
            <el-option label="日历" value="Calendar"></el-option>
            <el-option label="时钟" value="Clock"></el-option>
            <el-option label="搜索" value="Search"></el-option>
            <el-option label="查看" value="View"></el-option>
          </el-select>
        </el-form-item>
      </el-form-item>
      
      <el-form-item label="功能选项">
        <el-checkbox v-model="datas.clearable">可清空</el-checkbox>
        <el-checkbox v-model="datas.showPassword" v-if="datas.type === 'password'">显示密码按钮</el-checkbox>
        <el-checkbox v-model="datas.disabled">禁用状态</el-checkbox>
        <el-checkbox v-model="datas.required">必填</el-checkbox>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'inputstyle',
  props: {
    datas: Object,
    'data-type': String,
  },
}
</script>

<style scoped lang="less">
.inputstyle {
  width: 100%;
  box-sizing: border-box;
  
  /* 标题 */
  h2 {
    padding: 24px 16px 24px 0;
    margin-bottom: 15px;
    border-bottom: 1px solid #f2f4f6;
    font-size: 18px;
    font-weight: 600;
    color: #323233;
  }
}
</style> 